<template>
  <div>
    <div class="bnt">
      <i class="off"  />
      <div class="praise1">
        <span
         class="praise2"
        >
          <el-icon>
            <Star />
          </el-icon>
        </span>
        <span
          class="praise3"
          @click="dialogVisible = true"
        >
          评分
        </span>
      </div>
    </div>
    <div
     class="toBuy1"
    >
      <i
        class="strs"
      />
      <div class="toBuy2">
        <span
          class="toBuy3"
        >
          <el-icon>
            <Goods />
          </el-icon>
        </span>
        <span
         class="toBuy4"
          @click="buy"
          >特惠购票</span
        >
      </div>
    </div>

    <el-dialog title="我的评分" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <div class="dia1">
        <h4>请分享您的观影体验！</h4>
      </div>
      <el-rate v-model="v" :texts="texts" :colors="['#409eff', '#67c23a', '#FF9900']" show-text>
      </el-rate>
      <div class="dia2">
        <span  class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="star">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import router from '@/router'
import emmitter from '@/utils/bus'
import '@/assets/scss/userCom/mBnt.scss'
const dialogVisible = ref(false)
const sForm = reactive({
  uid: '',
  mid: '',
  star: ''
})
const texts = ref(['差劲', '不满', '一般', '满意', '惊喜'])
const v = ref()
const mid = ref()
onMounted(() => {
  emmitter.on('movieEvent', (e) => {
    mid.value = e.mid
  })
})
const star = () => {
  sForm.uid = JSON.parse(sessionStorage.getItem('uid'))
  sForm.mid = mid.value
  sForm.star = v

  axios.post('/api/rate/addRate', sForm).then((res) => {
    if (res.data === '评分失败！已经评论过！') {
      alert('您已参与评分！感谢参与！')
      sForm.value = {
        uid: '',
        mid: '',
        star: ''
      }
      dialogVisible.value = false
    } else if (res.data === '评分成功！') {
      ElMessage({
        showClose: true,
        message: '感谢评分！',
        type: 'success'
      })
      sForm.value = {
        uid: '',
        mid: '',
        star: ''
      }
      dialogVisible.value = false

      alert('感谢评分！')
      router.go(0)
    } else {
      ElMessage({
        showClose: true,
        message: '评分失败！',
        type: 'error'
      })
    }
  })
}
const buy = () => {
  sessionStorage.setItem(
    'chooseMovie',
    JSON.stringify(JSON.parse(sessionStorage.getItem('movieInfo')))
  )
  router.push('/Buy')
}
</script>

